:root {
  --cardBG: #ffffff;
  --bodyBgColor: #f5f5f7;
  --prmColor: #15d3d0;

  --subBtnBin: #15d6ce;
  --subBtnEnd: #18eeb9;

  --asideBg: #000000;
  --asideBtnBin: #15b4eb;
  --asideBtnEnd: #1cecbb;
  --asideSetBg: #1e8885;
  --asideHisBg: #2f99a4;
}

* {
  box-sizing: border-box;
}

.chat-left .el-scrollbar__wrap,
.chat-chart .el-scrollbar__wrap {
  overflow-x: hidden;
}

.chat-body {
  display: flex;
  flex-direction: column;
  align-items: stretch;

  .chatMian {
    position: relative;
    padding: 20px 10px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    height: 100%;

    .chat {
      flex-grow: 1;
      overflow: hidden;
      padding-bottom: 40px;
      .list {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        .item {
          max-width: 90%;
          display: flex;
          margin-top: 10px;
          .icon {
            flex-shrink: 0;
            // border-radius: 50%;
            overflow: hidden;
            // background-color: var(--bodyBgColor, #f5f5f7);
            text-align: center;
            width: 40px;
            height: 40px;
            margin: 0 5px;
            // padding: 5px;
            img {
              width: 100%;
              height: 100%;
            }
          }
          .main {
            .head {
              display: flex;
              justify-content: space-between;
              align-items: center;
              .left {
                display: flex;
                align-items: baseline;
                .user {
                  font-size: 13px;
                  color: #000;
                  margin-right: 10px;
                }
                .time {
                  font-size: 12px;
                  color: #95979f;
                  margin-right: 10px;
                }
              }
              .right {
                display: flex;
                align-items: center;
                justify-content: stretch;
                i {
                  font-size: 16px;
                  color: #95979f;
                  padding: 6px;
                  border-radius: 3px;
                  cursor: pointer;
                  height: 28px;
                  img {
                    width: 16px;
                    height: 16px;
                  }
                }
                i:hover {
                  color: #333;
                  background-color: var(--bodyBgColor, #f5f5f7);
                  img {
                    filter: brightness(30%);
                    // 图片变黑
                  }
                }
              }
            }
            .text {
              text-align: justify;

              border: 1px solid #ccc;

              color: #565862;
              line-height: 180%;
              overflow: hidden;

              box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.1);
              margin: 5px 0 10px;
              padding: 10px 8px;
              font-size: 12px;
              border-radius: 3px 10px 10px 10px;
            }
          }

          &.ask {
            align-self: flex-end;
            flex-direction: row-reverse;
            text-align: right;
            .main {
              .head {
                justify-content: flex-end;
                .left {
                  flex-direction: row-reverse;
                }
              }
              .text {
                border: 1px solid #105cfb;
                background-color: #105cfb;
                color: #fff;
                box-shadow: 0 4px 10px 0 #15d3d050;
                border-radius: 10px 3px 10px 10px;
              }
            }
          }
          &.reply {
            .main {
              .head {
                .left {
                  .time {
                    display: none;
                  }
                }
                .right {
                  .like,
                  .delike {
                    display: none;
                  }
                }
              }
              .text{
                background-color: #fff;
                box-shadow: none;
                border:none;
              }
            }
          }
        }
      }
    }

    .sub {
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      border-radius: 10px;
      .subFastInput{
        width: 100%;
        height: 40px;
        display: flex;
        align-items: center;
        position: relative;
        border-radius: 10px;
        
      }
      .subInput{
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        position: relative;
        background-color: #fff;
        border-radius: 10px;
        padding-right: 10px;
        .text {
            padding: 5px 10px;
            padding-right: 0;
            width: 100%;
            height: 100%;
            border-radius: 16px 4px 4px 16px;
            overflow: hidden;
            border: none;
            .el-textarea__inner {
              border: none;
              resize: none;
              color: #333;
              height: 30px;
              font-size: 14px;
              line-height: 30px;
              box-shadow: none;
            }
          }
        
          .btn {
            // flex-shrink: 0;
            // height: 100%;
            // overflow: hidden;
          
            // width: 80px;
            // line-height: 40px;
            // letter-spacing: normal;
            // margin-left: 5px;
          
            // background: linear-gradient(
            //   to right,
            //   var(--subBtnBin, #15d6ce),
            //   var(--subBtnEnd, #18eeb9) 40%
            // );
            // border-radius: 4px 16px 16px 4px;
          
            // font-size: 16px;
            // color: #fff;
            // text-align: center;
          
            cursor: pointer;
          }
        
          .loading {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 200px;
            height: 150px;
            transform: translate(-50%, -50%);
            img {
              width: 100%;
              height: auto;
            }
          }
        }
      }
  }
}
.subFastInputBtn{
  background-color: #fff;
  border-radius: 10px;
  cursor: pointer;
  padding-left: 10px;
  padding-right: 10px;
}
